<template lang="pug">
  el-drawer.commonDrawer(
    :title="'添加里程碑'"
    :visible="visibleDialog"
    append-to-body
    center
    destroy-on-close
    direction="rtl"
    size="720px"
    @close="$_handleCancel"
  )
    .drawer-content
      form-box(
        ref="form"
        :fields="fields"
        :showBtns="false"
        :layoutCol="{ xs: 24, md: 24, lg: 24 }"
        labelWidth="146px"
      )
        div(slot="form-children")
          el-button(type="primary" icon="el-icon-circle-plus" round plain @click="addChildren") 选择宝宝
          div(class="tag-div")
            el-tag(v-for="(tag, index) in childrenList" :key="index" class="tag-item" closable @close="deleteHandle(tag)") {{tag.name}}
    .drawer-footer.tr
      el-button.gradientVertical(size="large" :loading="submitting" @click="submitHandle" round) 提交
    table-selector(
      @sureHandle="sureHandle"
      :visible.sync="childrenVisible"
      :value="value"
      :column="children.column"
      :search-config="children.searchConfig"
      label="宝宝"
      :single="false"
      reqMethod="POST"
      :queryPropsParams="{ areaId: curArea.areaId }"
      req-url="web/children/page")
</template>

<script>
import { mapGetters } from 'vuex'
import TableSelector from '@/components/Basic/TableSelector'
import { addMilepostRecord, getMonthAgeGrowth } from '../api'
import { childrenColumn, seachConfigClient } from '../config'
import { getClassesByArea } from '@/api/common'
export default {
  components: {
    TableSelector
  },
  props: {
    id: {
      type: String,
      default: ''
    },
    visible: {
      type: Boolean,
      default: false
    },
    childrenId: {
      type: String,
      default: ''
    },
    classesId: {
      type: String,
      default: ''
    },
    title: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      submitting: false,
      loading: false,
      info: {
        label: '',
        content: ''
      },

      classes: [],
      childrenList: [],
      value: [],
      childrenVisible: false
    }
  },
  computed: {
    ...mapGetters(['curArea']),
    visibleDialog: {
      get () {
        return this.visible
      },
      set (val) {
        this.$emit('update:visible', val)
      }
    },
    children () {
      return {
        column: childrenColumn,
        searchConfig: seachConfigClient(this.classes)
      }
    },
    fields () {
      const monthList = []
      for (let i = 1; i <= 48; i++) {
        monthList.push({
          id: i,
          name: i
        })
      }
      const { label, content } = this.info
      console.log(label)
      return [
        {
          label: '选择宝宝',
          key: 'children',
          type: 'slot'
        },
        {
          key: 'monthAge',
          label: '月龄',
          type: 'select',
          rules: [{ required: true, message: '请选择' }],
          fieldProps: {
            options: monthList,
            props: { value: 'id', label: 'name' }
          },
          events: {
            change: val => this.monthChange(val)
          }
        },
        {
          key: 'label',
          label: '儿心量表',
          rules: [{ required: true, message: '请输入' }],
          type: 'textarea',
          fieldProps: {
            rows: 10,
            maxlength: 500
          },
          initialValue: label
        },
        {
          key: 'content',
          label: '格赛尔发育量表',
          rules: [{ required: true, message: '请输入' }],
          type: 'textarea',
          fieldProps: {
            rows: 10,
            maxlength: 500
          },
          initialValue: content
        },
        {
          key: 'cover',
          label: '照片',
          type: 'upload',
          fieldProps: {
            help: '如不上传，默认系统封面',
            helpStyle: 'c_error',
            // listType: 'picture-card',
            imgFlag: true,
            limit: 6,
            accept: 'image/*',
            'show-file-list': false
          }
        }
        // {
        //   key: 'description',
        //   label: '简介',
        //   rules: [{ required: true, message: '请输入' }],
        //   type: 'textarea'
        // }
      ]
    }
  },
  watch: {
    visible (val) {
      if (val) {
        this.info = {
          label: '',
          content: ''
        }
      }
    }
  },
  created () {
    this.getClasses()
  },
  methods: {
    async submitHandle () {
      // const { childrenId, classesId } = this
      const { childrenList } = this
      if (childrenList.length === 0) {
        this.$message.warning('请先选择宝宝')
        return
      }

      const childrenIds = childrenList.map(x => {
        return x.id
      }).join(',')
      const classIds = childrenList.map(x => {
        return x.classesId
      }).join(',')

      const values = await this.$refs.form.submitForm()
      console.log(values)
      const { cover } = values
      const url = cover.map(x => {
        return x.url
      }).join('|')
      delete values.cover
      this.submitting = true
      addMilepostRecord({
        ...values,
        childrenIds: childrenIds,
        classIds: classIds,
        url
      }).then((res) => {
        console.log(res)
        this.$emit('getList')
        this.$_handleCancel()
        this.$message.success('保存成功')
      }).finally(() => {
        this.submitting = false
      })
    },
    monthChange (res) {
      this.info = {
        label: '',
        content: ''
      }
      getMonthAgeGrowth({ monthAge: res }).then(res => {
        this.info = {
          label: res.label,
          content: res.content
        }
      })
    },
    $_handleCancel () {
      this.visibleDialog = false
    },

    addChildren () {
      this.value = [...this.childrenList]
      this.childrenVisible = true
    },

    // 删除标签
    deleteHandle (tag) {
      const { childrenList } = this
      this.childrenList = [...childrenList.filter(x => x.id !== tag.id)]
    },

    sureHandle (data) {
      console.log(data)
      this.childrenList = data
    },

    async getClasses () {
      const { curArea } = this
      this.classes = await (getClassesByArea({ areaId: curArea.areaId }) || [])
    }
  }
}
</script>

<style lang="scss" scoped>
.tag-div{
  margin-top: 10px;
  .tag-item{
    margin-right: 10px;
    margin-top: 10px;
  }
}
</style>
